<template>
  <a-modal v-model:visible="modalVisible" @ok="handleOk" @cancel="handleCancel">
    <template #title> 新建计划 </template>
    <div>
      <a-form ref="FormData" layout="vertical" :model="form" auto-label-width>
        <a-form-item field="planNumber" label="采购计划名称:" required>
          <a-select
            v-model="form.planNumber"
            :style="{ width: '320px' }"
            placeholder="Please select ..."
          >
            <a-option
              v-for="item in PlanList"
              :key="item.id"
              :value="item.number"
              >{{ item.name }}</a-option
            >
          </a-select>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref } from 'vue';
  import { getPurchasePlanList } from '@/api/buy-management/buy-plan/index';

  const props = withDefaults(
    defineProps<{
      visible: boolean;
    }>(),
    {
      visible: false
    }
  );

  const emit = defineEmits(['update:visible', 'addPlanProduct']);
  const FormData = ref();
  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    }
  });

  const form = reactive({
    planNumber: ''
  });

  const PlanList = ref();
  const getPurchasePlanData = async () => {
    const res = await getPurchasePlanList({ page: 1, size: 99999, state: 1 });
    PlanList.value = res.content;
  };
  getPurchasePlanData();

  const rules = reactive({});

  // 确定
  const handleOk = async () => {
    FormData.value.validate((res) => {
      if (!res) {
        emit('addPlanProduct', form.planNumber);
        modalVisible.value = false;
      }
    });
  };

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };
</script>

<style scoped lang="less"></style>
